import React from 'react'
import { Button, Input, Form, Toast, Modal } from 'antd-mobile'
import {doFinishRegisterApi} from '@/api/regist'
import { useLocation,useHistory } from 'react-router-dom/cjs/react-router-dom.min'
import { useState } from 'react'

// 注册页第一步组件
export default function Step1() {
  const [form] = Form.useForm()
  const loc = useLocation()
  const his = useHistory()
  const [isDisabled,setIsDisabled] = useState(true)  //设置完成按钮变量 -- 是否禁用

  // 点击下一步执行的方法
  const onSubmitFn = () => {
    const values = form.getFieldValue()
    values.tel = loc.state.tel
    doFinishRegisterApi(values).then(res=>{
      console.log(res);
      if(res.data.code == 200){
        // 注册成功:弹出提示 并点击确定跳转到登录页
        Modal.alert({
          title: '提示',
          content: '注册成功啦!',
          showCloseButton: true,
          afterClose(){
            console.log('点击确定');
            // 跳转到登录页
            his.push('/login')
          },
          confirmText:'确定'
        })

        
      }else{
        // 注册失败: 弹出提示
        Toast.show({
          icon:'fail',
          content:'啊哦~注册失败了'
        })
      }
    })
  }


  return (

    <div style={{
      marginTop: '10px'
    }}>
      <Form layout='horizontal'
        form={form}
        mode='card'>
        <Form.Item label='密码' name='password'>
          <Input placeholder='密码6位' type='text' onChange={(value)=>{
            // console.log(value);
            if(/^\w{6}$/.test(value)){
              setIsDisabled(false)
            }else{
              setIsDisabled(true)
            }
          }}/>
        </Form.Item>

        <Button block type='submit' color='danger' size='large' style={{
          borderRadius: '30px',
          boxSizing: 'border-box'
        }}
          onClick={onSubmitFn} disabled={isDisabled}>完成</Button>
      </Form>
    </div>
  )
}
